<template>
<div class="change-cp-container">
    <el-select 
        v-model="queryParams.areas"
        @change='(value)=>{
            queryParams.horizons = [];
            queryParams.reports = [];
            if(!value) return;
            getHorizons();
            onSelectReport();
        }'
        @clear="()=>{
            horizons = [];
            reports = [];
            onSelectReport();
        }"
        @remove-tag="onSelectReport"
        :multiple="true"
        clearable collapse-tags
        placeholder="地区">
        <el-option
            v-for="item in areas"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
    </el-select>
    <el-select 
        v-model="queryParams.horizons" 
        @change='(value)=>{
            queryParams.reports = [];
            if(!value) return;
            getReports();
            onSelectReport();
        }'
        @clear="()=>{
            reports = [];
            onSelectReport();
        }"
        @remove-tag="onSelectReport"
        :multiple="true"
        clearable collapse-tags
        placeholder="层位">
        <el-option
            v-for="item in horizons"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
    </el-select>
    <el-select 
        v-model="queryParams.reports" 
        @change="onSelectReport"
        @clear="onSelectReport"
        @remove-tag="onSelectReport"
        clearable collapse-tags
        :multiple="true"
        placeholder="请选择报告">
        <el-option
            v-for="item in reports"
            :key="item.reportNo"
            :label="item.reportTitle"
            :value="item.reportNo">
            <span style="float: left">{{ item.reportTitle }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.reportNo }}</span>
        </el-option>
    </el-select>
</div>
</template>
<script>
/*
 选择报告组件
 */
export default {
    props:{
        reportType:{  //报告类型
            type:Number,
            default:1,  //地层水报告
        },
    },
    data() {
        return {
            loading:false,
            queryParams:{  //input框中的查询参数
                areas:[],
                horizons:[],
                reports:[],
            },
            areas:[],  //地区列表
            horizons:[],  //层位列表
            reports:[], //报告列表
        };
    },
    created() {
        this.getWellNos();
    },
    methods:{
        initData(data){  //初始化数据
            console.log(data);
        },
        getWellNos(){  //获取井号列表
            this.$Api.getWellNos({
                params:{
                    reportType:this.reportType,
                },
            }).then(res=>{
                this.areas = res.data;
            }).catch(()=>{
                return;
            }).finally(()=>{
                return;
            });
        },
        getHorizons(){  //获取层位列表
            this.$Api.getHorizons({
                params:{
                    reportType:this.reportType,
                    area:this.queryParams.areas.join(','),
                },
            }).then(res=>{
                this.horizons = res.data;
            }).catch(()=>{
                return;
            }).finally(()=>{
                return;
            });
        },
        getReports(){  //获取报告数据(多条)
            this.loading = true;
            this.$Api.getReports({
                params:{
                    reportType:this.reportType,
                    area:this.queryParams.areas.join(','),
                    horizon:this.queryParams.horizons.join(','),
                },
            }).then(res=>{
                this.reports = res.data;
            }).catch(()=>{
                return;
            }).finally(()=>{
                this.loading = false;
            });
        },
        onSelectReport(){  //获取报告数据
            this.$emit('onChange',{
                ...this.queryParams,  //防止向外暴露的对象监听重复
            });
        },
    },
};
</script>
<style scoped lang="scss">
.change-cp-container{
    width: 100%;
    height: fit-content;
    margin: 0 auto;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    border-radius: var(--my-border-radius);
    overflow: hidden;
    box-sizing: border-box;
}
</style>
